<script setup>
import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls'
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader'
import { computed, onMounted, ref, watch } from 'vue'

const props = defineProps({
  gltfUrl: {
    type: String,
    default: ''
  },
  sceneBackground: {
    type: String,
    default: ''
  },
  cameraX: {
    type: Number,
    default: 0
  },
  cameraY: {
    type: Number,
    default: 0
  },
  cameraZ: {
    type: Number,
    default: -100
  },
  minDistance: {
    type: Number,
    default: 100
  },
  maxDistance: {
    type: Number,
    default: 1000
  },
  productName: {
    type: String,
    default: ''
  }
})

const threeView = ref(null)
let controls, camera
const cameraPosiSet = computed(() => {
  return { x: props.cameraX, y: props.cameraY, z: props.cameraZ }
})
onMounted(() => {
  const scene = new THREE.Scene()
  // 设置背景色为透明
  scene.background = null
  camera = new THREE.PerspectiveCamera(
    75,
    threeView.value.offsetWidth / threeView.value.offsetHeight,
    0.1,
    1000
  )

  const directionalLight = new THREE.AmbientLight(0xffffff, 5)
  scene.add(directionalLight)
  const loader = new GLTFLoader()
  loader.load(
    props.gltfUrl,
    function (gltf) {
      scene.add(gltf.scene)
    },
    undefined, // 进度回调可选
    function (error) {
      console.error('An error happened', error) // 添加错误处理
    }
  )

  // camera.position.set(0, 0, props.cameraZ)
  camera.position.set(cameraPosiSet.value.x, cameraPosiSet.value.y, cameraPosiSet.value.z)
  // camera.lookAt(0, 0, 0)

  // 设置背景色为透明 必须设置alpha: true
  const renderer = new THREE.WebGLRenderer({ alpha: true })
  renderer.setSize(threeView.value.offsetWidth, threeView.value.offsetHeight)
  renderer.setPixelRatio(window.devicePixelRatio)
  controls = new OrbitControls(camera, renderer.domElement)
  controls.maxDistance = props.maxDistance
  controls.minDistance = props.minDistance
  // controls.autoRotate = true
  // controls.autoRotateSpeed = -1.0
  controls.update()

  if (threeView.value) {
    // 确保threeView已经正确绑定到DOM元素
    threeView.value.appendChild(renderer.domElement)
  }
  function animate() {
    requestAnimationFrame(animate)
    renderer.render(scene, camera)
    controls.update()
  }
  animate()
})
function setView(x, y, z) {
  controls.reset()
  camera.position.set(x, y, z)
  controls.update
}
defineExpose({
  toFrontView: () => setView(0, 0, props.cameraZ),
  toBackView: () => setView(0, 0, -props.cameraZ),
  toLeftView: () => setView(-props.cameraZ, 0, 0),
  toRightView: () => setView(props.cameraZ, 0, 0),
  toTopView: () => setView(0, -props.cameraZ, -0.1),
  toBottomView: () => setView(0, props.cameraZ, -0.1)
})
watch(cameraPosiSet, (newval) => {
  // camera.position.set(cameraPosiSet.value.x, cameraPosiSet.value.y, cameraPosiSet.value.z)
  camera.position.set(newval.x, newval.y, newval.z)
  // controls.update()
})
// function resetControls() {
//   controls.reset()
// }
</script>

<template>
  <div ref="threeView" class="threejs_container">
    <div class="product_name">{{ productName }}</div>
    <!-- <div class="resetbt" @click="resetControls">重置</div> -->
  </div>
</template>

<style lang="scss" scoped>
.threejs_container {
  width: 100%;
  height: 100%;
  position: relative;
  .product_name {
    width: fit-content;
    height: fit-content;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    font-family: 'slideyouran-Regular';
    color: red;
    font-size: 3vw;
    -webkit-text-stroke: 1px white;
  }
  .resetbt {
    width: 4vw;
    height: 2vw;
    line-height: 2vw;
    text-align: center;
    color: orangered;
    font-family: 'zcool-qingke-huangyou';
    font-size: 1.1vw;
    letter-spacing: 0.4vw;
    background-color: bisque;
    border-radius: 0.2vw;
    position: absolute;
    right: 0.5vw;
    top: 0.5vw;
  }
}
</style>
